<template>
	<view>
		<u-tabbar
			:value="value"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="false"
			:zIndex="999"
		>
			<u-tabbar-item text="首页" icon="home" @click="gotoPage"></u-tabbar-item>
			<u-tabbar-item text="商品" icon="photo" @click="gotoPage" ></u-tabbar-item>
			<u-tabbar-item text="购物车" icon="shopping-cart" :badge="goods_total" @click="gotoPage" ></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="gotoPage" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	// import store from '@/store/store.js'
	import { mapState, mapGetters } from 'vuex'
	
	export default {
		computed: {
			...mapState({
				m_value: (state) => state.m_tabbar.m_value
			}),
			...mapGetters('m_tabbar', ['upVal']),
			...mapGetters('m_cart', ['total'])
		},
		name:"tab-bar",
		data() {
			return {
				value: 0,
				page:['index','list','shoping','user'],
				goods_total: 0
			}
		},
		methods: {
			gotoPage(e) {
				this.$store.commit("m_tabbar/setValue", e);
				uni.switchTab({
					url: `/pages/${this.page[e]}/${this.page[e]}`
				})
			}
		},
		watch: {
			upVal: {
				handler(newVal){
					this.value = newVal
				},
				immediate: true,
				deep: true
			},
			total: {
				handler(newVal){
					this.goods_total = newVal
				},
				immediate: true
			}
		},
	}
</script>

<style lang="scss">

</style>